<template>
  <div class="warp">
    <div id="echarts"></div>
    <div class="van-hairline--top">
        测试一下边框
    </div>
    <van-button type="primary" @click="goLogin">提交</van-button>
  </div>
</template>
<script lang="ts">
import {
    defineComponent,
    getCurrentInstance,
    ComponentInternalInstance,
    onMounted,
    ref,
    Ref,
    UndefinedAble,
} from 'vue';
import {EChartsType} from 'echarts';
import {useRouter} from 'vue-router'
export default defineComponent({
    name: 'Home',
    setup() {
        const router = useRouter()
        const myEcharts: Ref<UndefinedAble<EChartsType>> = ref(undefined);
        onMounted(() => {
            const {proxy} = getCurrentInstance() as ComponentInternalInstance;
            myEcharts.value = proxy?.$echarts.init(document.querySelector('#echarts') as HTMLElement);
            myEcharts.value?.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            })
        })
        const goLogin = () => {
            router.push({
                path: '/login'
            })
        }
        return {
            goLogin
        }
    }
})
</script>
<style lang="scss" scopted>
.warp {
    #echarts {
        height: 300px;
    }
}
</style>
